<template>
  <div class="toolbar bg-black">
    <div class="left-button">
      <slot name="left-button"></slot>
    </div>
    <div class="title">{{viewTitle}}</div>
    <div class="right-button">
      <slot name="right-button"></slot>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['viewTitle'],
    ready: function () {
      this.$on('goBack', function () {
        window.localStorage.setItem('#lastProductConditionIndex', 0)
        var path = this.$route.path
        if (path === '/home') {
          this.$dispatch('exit')
        } else if (path !== '/industry/industryHome' && path.indexOf('/industry/') > -1) {
          this.$route.router.go('/industry/industryHome')
        } else {
          this.$route.router.go('/home')
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  $height: 6.6vh;
  $marginLeft: 0.5rem;
  $marginRight: 0.5rem;

  div.toolbar{
    position: fixed;
    top: 0;
    box-sizing: border-box;
    height: $height;
    width: 100%;
    background: #fff;
    z-index: 99;
    border-bottom: #dddddd 1px solid;

    .title{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: $height;
      line-height: $height;
      font-size: .36rem;
      text-align: center;
      color: #000;
    }

    .left-button,.right-button{
      position: relative;
      float: left;
      height: 100%;
      z-index: 1000;
    }
    .left-button{
      margin-left: .38rem;
    }
    .right-button{
      margin-right: .1rem;
      float: right;
      color: rgba(153,153,153,1);
    }
  }
</style>
